.home {
    width: 100vw;
    height: 100vh;
    position: relative;
}

/* 取消滚动条 */
body {
    overflow: hidden;
}

.home-top {
    background: url('../../assets/img/ceil-day.png');
    background-size: 100% 100%;
    width: 100%;
    height: 11.7%;
    opacity: 1;
    min-width: 600px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}

.home-content {
    /* background: url('../../assets/img/indexLightBackground.png'); */
    background-size: 100% 100%;
    width: 100%;
    height: 90%;
    position: absolute;
    top: 10%;
    z-index: 999;
}

.home-bottom {
    background: url('../../assets/img/floor.png');
    background-size: 100% 100%;
    width: 100%;
    height: 10%;
    z-index: 999;
    position: absolute;
    bottom: 0;
    left: 0;
}

.home-bottom-img {
    position: absolute;
    bottom: 45%;
    width: 39px;
    height: 38px;
    border-radius: 50%;
    left: 45%;
}


/* 视频模块样式 */
.home-middle {
    background: url('../../assets/img/border-day.png');
    background-size: 100% 100%;
    width: 55%;
    height: 65%;
    z-index: 999;
    position: absolute;
    top: 22%;
    left: 42%;
    position: relative;
}

.home-middle-video {
    position: absolute;
    top: 8%;
    left: 12px;
}

.home-img {
    width: 100vw;
    height: 88vh;
    object-fit: cover;
}

/* 主题切换按钮 */
.home-btn {
    position: absolute;
    z-index: 999;
    top: 6%;
    right: 13px;
    color: blue;
    width: 50px;
    height: 10px;
}

.home-r-img {
    position: absolute;
    top: -50%;
    right: -96%;
    z-index: 999;
    position: relative;
}

.home-imgs {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.home-r-s {
    position: absolute;
    width: 130px;
    height: 10px;
    border-radius: 17px 17px 0px 17px;
    line-height: 10px;
    top: 17%;
    right: 5%;
    border: solid 1px black;
    z-index: 999;
    background: #FDEFCB;
}

.home-r-p {
    font-size: 5px;
    text-align: center;
}


.bottom-x {
    position: absolute;
    bottom: 6%;
    left: 75%;
    z-index: 999;
}

.bottom-x1 {
    width: 20px;
    height: 20px;
}


.bottom-xx {
    position: absolute;
    bottom: 6%;
    left: 80%;
    z-index: 999;
}

.bottom-x2 {
    width: 20px;
    height: 20px;
}

.bottom-xxx {
    position: absolute;
    bottom: 5%;
    left: 85%;
    z-index: 999;
}



.home-leftr {
    position: absolute;
    width: 200px;
    height: 270px;
    top: 13%;
    left: 5%;
    z-index: 999;
}


.home-Language {
    position: absolute;
    width: 200px;
    height: 270px;
    top: 6%;
    right: -80px;
    z-index: 999;
}


.danmaku-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    /* 防止弹幕阻挡其他交互 */
}

.danmaku {
    position: absolute;
    white-space: nowrap;
    animation: moveDanmaku linear infinite;
    color: rgb(146, 230, 12);
    /* 弹幕文字颜色 */
    font-size: 10px;
    /* 弹幕文字大小 */
    z-index: 999;
}

.danmaku-input-container {
    position: absolute;
    bottom: 40px;
    left: 60%;
    z-index: 999;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.danmaku-input-container input {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.danmaku-input-container button {
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.danmaku-input-container button:hover {
    background-color: #0056b3;
}

@keyframes moveDanmaku {
    from {
        transform: translateX(500%);
    }

    to {
        transform: translateX(-100%);
    }
}